<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { ref, onMounted, computed } from "vue";
import { manageAPI, isVipAPI, upVipAPI } from "@/server/api/cartView";
import { useRouter } from "vue-router";
import { useUseStore } from "@/stores/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const useStore = useUseStore();
const router = useRouter();
const itemIds = ref(0);
// 设置按钮的初始状态
const isDisabled = ref(true);
const isActive = ref(false);
let isfollow = ref();

// 商品数量接口
const numbers = async (uid) => {
  const res = await manageAPI(uid);
  sum.value = res.data.data.num;
  //console.log('数量',res.data.data);
  itemIds.value = res.data.data.itemId;
};
// 检验是否是Vip
const isVipFun = async (uid) => {
  const res = await isVipAPI(uid);
  isfollow.value = res.data.data;
  //  console.log("是否为VIP",res.data);
};
// 升级为VIP
const upVipFun = async (uid) => {
  const res = await upVipAPI(uid);
};

onMounted(() => {
  numbers(useStore.userId);
  isVipFun(useStore.userId);
});
const currentRate = ref(50);
const gradientColor = {
  "0%": "#FC8181",
  "100%": "#AC47FF",
};
let sum = ref(0);

const goManageitemsubset = () => {
  console.log(itemIds.value, "1111")
  router.push({
    name: "ManageItemsubset",
    query: {
      itemId: itemIds.value,
    },
  });
};

// 按钮文本
const buttonText = computed(() => {
  if (!isfollow.value) {
    if (sum.value < 10) {
      return "cannotUp";
    } else {
      isActive.value = true;
      isDisabled.value = false;
      return "canUp";
    }
  }
});
// 处理按钮点击事件
const handleClick = () => {
  if (!isDisabled.value) {
    // 设置按钮为不可点击状态
    isDisabled.value = true;
    isfollow.value = true;
    isActive.value = false;
    // 执行点击后的逻辑
    upVipFun(useStore.userId);
  }
};
</script>

<template>
  <div>
    <TopButtonCenter :title="$t('me.manage.item.title')" />

    <div class="ManageItem">
      <div class="content">
        <van-circle v-model:current-rate="currentRate" :stroke-width="80" :rate="sum * 10" size="220rem"
          start-position="left" :color="gradientColor" layer-color="#f5f5f5" default>
          <div class="text">
            <div class="totel">Total</div>
            <div class="sum">{{ sum }}/10</div>
          </div>
        </van-circle>
      </div>
      <p class="text-p">
        {{ $t("me.manage.tips") }}
      </p>
      <footer>
        <div class="footer_button">
          <button class="button_left" @click="goManageitemsubset">
            {{ $t("me.manage.item.title") }}
          </button>

          <button round block native-type="submit" :class="{ disabled: isDisabled, active: isActive }"
            class="button_right" v-if="!isfollow" @click="handleClick">
            {{ $t("me.manage." + buttonText) }}
          </button>

          <button class="button_right" v-else>Upgraded</button>
        </div>
      </footer>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ManageItem {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  .content {
    padding-top: 50rem;
    display: flex;
    justify-content: center;

    .text {
      font-size: 40rem;
      color: #cfcfcf;
      transform: translatey(60rem);

      .sum {
        color: #642e8e;
      }

      .totel {
        font-size: 16rem;
      }
    }
  }

  .text-p {
    padding: 50rem 10rem;
    font-size: 16rem;
    color: #ccc;
  }
}

footer {
  width: 100%;
  position: absolute;
  bottom: -30rem;
  left: 0;

  .footer_button {
    width: 100%;
    height: 75rem;
    display: flex;
    justify-content: space-around;

    .button_left {
      color: #fff;
      background-color: #642e8eff;
      width: 45%;
      height: 40rem;
      line-height: 40rem;
      border-radius: 20rem;
      text-align: center;
      border: 1rem solid;

      &:hover {
        color: #fff;
        background-color: #642e8eff;
      }
    }

    .button_right {
      background-color: gray;
      cursor: not-allowed;
      color: #fff;
      width: 45%;
      height: 40rem;
      line-height: 40rem;
      border-radius: 20rem;
      text-align: center;
      border: 1rem solid;
    }

    button.disabled {
      background-color: gray;
      cursor: not-allowed;
    }

    button.active {
      background-color: #642e8eff;
    }
  }
}
</style>
